<script setup>
import { useRouter } from 'vue-router'

const props = defineProps(['menuData', 'index'])

// 创建router实例
const router = useRouter()
// 点击菜单
const handleClick = (item, active) => {
	console.log(item)
	router.push(item.meta.path)
}

// console.log(props)
</script>

<template>
	<template v-for="(item, index) in props.menuData">
		<el-menu-item
			@click="handleClick(item, `${props.index}-${item.meta.id}`)"
			v-if="!item.children || item.children === 0"
			:index="`${props.index}-${item.meta.id}`"
			:key="`${props.index}-${item.meta.id}`">
			<el-icon size="20">
				<!-- 动态组件 -->
				<component :is="item.meta.icon"></component>
			</el-icon>
			<span>{{ item.meta.name }}</span>
		</el-menu-item>

		<el-sub-menu index="1" v-else :index="`${props.index}-${item.meta.id}`">
			<template #title>
				<el-icon size="20">
					<!-- 动态组件 -->
					<component :is="item.meta.icon"></component>
				</el-icon>
				<span>{{ item.meta.name }}</span>
			</template>
			<!-- 递归逻辑处理数据 -->
			<tree-menu
				:index="`${props.index}-${item.meta.id}`"
				:menuData="item.children" />
		</el-sub-menu>
	</template>
</template>

<style scoped></style>
